<div class="redtop">
  <div class="container">
    <h1>Edit your information</h1>
  </div>

  <svg class="triangle" viewBox="0 0 24 23.8" preserveAspectRatio="none">
    <use xlink:href="#triangle"></use>
  </svg>
</div>

<div class="container edit">
  <div class="row">
    <div class="col-md-9 col-md-offset-1">
      <%= form_for(resource, as: resource_name,
            url: registration_path(resource_name),
            html: { :method => :put, :class => 'form-horizontal personal-info' }) do |f| %>
          <%= devise_error_messages! %>
          <div class="form-group">
            <%= f.label :email, class: 'control-label col-sm-4' %>
            <div class="col-sm-8">
              <%= f.email_field :email, required: true, class: 'form-control' %>
              <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
                <div class='small .help-block'>Currently awaiting confirmation for: <%= resource.unconfirmed_email %></div>
              <% end %>
            </div>
          </div>

          <div class="form-group">
            <%= f.label :current_password, class: 'control-label col-sm-4' %>
            <div class="col-sm-8">
              <%= f.password_field :current_password, required: true, class: 'form-control' %>
            </div>
          </div>

          <div class="form-group">
            <%= f.label :password, "New password", class: 'control-label col-sm-4' %>
            <div class="col-sm-8">
              <%= f.password_field :password, :autocomplete => "off", :class => 'form-control' %>
            </div>
          </div>

          <div class="form-group">
            <%= f.label :password_confirmation, "Confirm new password", class: 'control-label col-sm-4' %>
            <div class="col-sm-8">
              <%= f.password_field :password_confirmation, :class => 'form-control' %>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <%= f.submit "Change", :class => 'btn btn-red-outline' %>
            </div>
          </div>
        <% end %>
    </div>
  </div>
</div>
